<template>
	<view class="con">
		<image  v-if="name=='珠宝礼品'" src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/b2b2c/30.png" style="width: 100%;position: absolute;z-index: -1;" mode="widthFix"></image>
		<image  v-else-if="name=='中外名酒'" src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/b2b2c/g1.png" style="width: 100%;position: absolute;z-index: -1;" mode="widthFix"></image>
		<image  v-else-if="name=='休闲养生'" src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/b2b2c/g2.png" style="width: 100%;position: absolute;z-index: -1;" mode="widthFix"></image>
		<image  v-else-if="name=='书法字画'" src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/b2b2c/g3.png" style="width: 100%;position: absolute;z-index: -1;" mode="widthFix"></image>
		<image  v-else-if="name=='汽车'" src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/b2b2c/g4.png" style="width: 100%;position: absolute;z-index: -1;" mode="widthFix"></image>
		<image  v-else-if="name=='旅游景点'" src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/b2b2c/g5.png" style="width: 100%;position: absolute;z-index: -1;" mode="widthFix"></image>
		<image  v-else-if="name=='广告传媒'" src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/b2b2c/g6.png" style="width: 100%;position: absolute;z-index: -1;" mode="widthFix"></image>
		<image  v-else-if="name=='房产置业'" src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/b2b2c/g7.png" style="width: 100%;position: absolute;z-index: -1;" mode="widthFix"></image>
		<image  v-else-if="name=='酒店住宿'" src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/b2b2c/g8.png" style="width: 100%;position: absolute;z-index: -1;" mode="widthFix"></image>
		<image  v-else-if="name=='餐饮美食'" src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/b2b2c/g9.png" style="width: 100%;position: absolute;z-index: -1;" mode="widthFix"></image>
		<image  v-else src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/b2b2c/g9.png" style="width: 100%;position: absolute;z-index: -1;" mode="widthFix"></image>
		<view class="top">
			<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/b2b2c/31.png" mode="" @click="returnPage"></image>
			<text class="title">{{name}}</text>
		</view>
		<view class="main">
			<view class="main_top">
				<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/b2b2c/ss.png" mode=""></image>
				<input class="sousuo" type="text" value="" placeholder="请输入商品名称" />
			</view>

			<view class="main-body">
				<view class="body" v-for="(item, index) in GoosList" :key="index" @click="bindGoodsShop(item.id)">
					<view class="left"><image :src="item.image" mode=""></image></view>
					<view class="right">
						<view class="title_a">{{ item.title }}</view>
						<view class="title_b">{{ item.subtitle }}</view>
						<view class="price_box">
							<view class="title_c">{{ item.sku_price[0].price}}</view>
							<view class="title_d">{{ item.original_price }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="kong" v-if="GoosList.length==0">
				<view class="zhongjian">
					<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/new_user/kong.png" mode=""></image>
					<view class="title">暂无数据</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			GoosList: [],
			shop_id:null,
			token:'',
			category_ids:null,
			name:''
		};
	},
	onLoad(options) {
		this.token=options.token
		this.shop_id=options.shop_id
		this.category_ids=options.category_ids
		this.name=options.name
		this.getData()
	},
	methods: {
		getData(){
			var url = '/api/goods/category/category_goods';
			let params = {
				shop_id:this.shop_id,
				category_ids:this.category_ids
			};
			this.Unfold_data.yh_data(params, 'POST', url, res => {
				if (res.data.code == 1) {
					this.GoosList = res.data.data;
				} else {
					this.Unfold_data.showWindow(res.data.msg);
				}
			});
		},
		bindGoodsShop(id){
			uni.navigateTo({
				url:'../goods_detail/goods_detail?id='+id+'&shop_id='+this.shop_id+'&token='+this.token
			})
		},
		//跳转上一页
		returnPage(){
		    uni.navigateBack({
		     delta:1
		    })
		},
	}
};
</script>

<style lang="scss" scoped>
.con {
	// background-color: #eef1f2;

	.top {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-top: 60upx;
		image{
			width: 18upx;
			height: 35upx;
			margin-left: 40upx;
		}
		.title{
			margin-left: 240upx;
			font-size: 35upx;
			color: #FFFFFF;
		}
	}

	.main {
		width: 683upx;
		min-height: 1160upx;
		background: #ffffff;
		box-shadow: 0px 0px 28px 1px rgba(148, 153, 155, 0.18);
		border-radius: 20px;
		margin: 34upx;
		margin-top: 40upx;
		padding-top: 10upx;

		.main_top {
			display: flex;
			width: 620upx;
			height: 67upx;
			border: 4upx solid #000000;
			border-radius: 34upx;
			justify-content: flex-start;
			align-items: center;
			margin: 30upx;
			padding: 34upx;

			image {
				width: 39upx;
				height: 39upx;
			}
		}
	}

	.main-body {
		.body {
			display: flex;
			.left {
				image {
					width: 95px;
					height: 99px;
					border-radius: 5px;
					margin: 10px;
				}
			}

			.right {
				.title_a {
					width: 462upx;
					font-size: 38upx;
					color: #302f2f;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.title_b {
					width: 400upx;
					font-size: 23upx;
					margin-top: 10upx;
					color: #c9c8c8;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.price_box{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					margin-top: 60upx;
					.title_c {
						font-size: 38upx;
						color: #dd3030;
					}
					
					.title_d {
						font-size: 32upx;
						text-decoration: line-through;
						color: #cdcccc;
						margin-left: 57upx;
					}
				}
			}
		}
	}
	.kong{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 400upx;
		.zhongjian{
			text-align: center;
			image{
				width: 180upx;
				height: 180upx;
			}
			.title{
				font-size: 28upx;
				color:#dd3030;
			}
		}
	}
}
</style>
